<template>
  <div class="asset-valuation-section" >

    <div class="combined-card">
      <h2 class="title">电力装备价值评估能帮助您做什么</h2>
      <div class="card-list">
        <div class="card-item">
          <div class="icon">
            <svg viewBox="0 0 24 24" fill="#1976d2">
              <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.66 20 24 17.31 24 14C24 12.08 22.79 10.3 21.09 10.03L19.35 10.04M12 13V17H14V13H17L12 8L7 13H10V17H12Z" />
            </svg>
          </div>
          <h3 class="card-title">明确电力装备价值</h3>
          <p class="card-description">通过系统评估，帮助电网企业明晰了解退役电力装备的真实价值状态</p>
        </div>
        <div class="card-item">
          <div class="icon">
            <svg viewBox="0 0 24 24" fill="#1976d2">
              <path d="M3 17H19V19H3V17M3 5V11H21V5H3M3 13H21V15H3V13Z" />
            </svg>
          </div>
          <h3 class="card-title">优化资源配置</h3>
          <p class="card-description">依据评估结果制定合理的处置方案和建议价格，优化收益构成</p>
        </div>
        <div class="card-item">
          <div class="icon">
            <svg viewBox="0 0 24 24" fill="#1976d2">
              <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3M19 19H5V5H19V19M14 17V12H17V10H14V5H12V10H9V12H12V17H14Z" />
            </svg>
          </div>
          <h3 class="card-title">交易依据支持</h3>
          <p class="card-description">作为供需双方合理定价交易的重要参考依据支撑</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AssetValuationSection'
}
</script>

<style scoped>
.asset-valuation-section {
  background-color: #f9f9f9; /* 浅灰色背景 */
  padding: 60px 20px;
  display: flex;
  justify-content: center;
  position: relative; /* 设置为相对定位，以便定位背景图片 */
  overflow: hidden; /* 防止背景图片超出 */
}

.background-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* 放在内容后面 */
}

.background-image {
  width: 100%;
  height: 100%;
  margin-bottom: 1200px;
  object-fit: contain; /* 保证图片完整显示，可能留白 */
  opacity: 0.5; /* 调整背景透明度 */
}

.combined-card {
  background-color: #fff; /* 白色卡片背景 */
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 40px; /* 增加一些内边距 */
  width: 90%; /* 调整卡片宽度 */
  max-width: 1600px;
  box-sizing: border-box;
  text-align: center;
  position: relative; /* 提升层级，覆盖背景 */
  z-index: 1;
}

.title {
  color: #2c3e50; /* 深蓝色标题 */
  font-size: 3em;
  font-weight: 800;
  margin-bottom: 40px;
}

.card-list {
  display: flex;
  justify-content: space-around; /* 调整卡片之间的间距 */
  gap: 40px; /* 设置卡片之间的间距 */
  flex-wrap: nowrap; /* 确保卡片在一行显示 */
}

.card-item {
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  flex: 1; /* 让每个卡片平均分配空间 */
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.icon svg {
  width: 60px;
  height: 60px;
}

.card-title {
  color: #3498db; /* 蓝色卡片标题 */
  font-size: 1.9em;
  font-weight: 500;
  margin-bottom: 10px;
}

.card-description {
  color: #555; /* 灰色描述文字 */
  font-size: 1.2em;
  line-height: 1.6;
  text-align: left;
}

/* 响应式布局 */
@media (max-width: 960px) {
  .combined-card {
    width: 95%;
    padding: 30px;
  }

  .title {
    font-size: 2.5em;
    margin-bottom: 30px;
  }

  .card-list {
    flex-direction: column; /* 小屏幕下垂直排列 */
    align-items: center;
    gap: 30px;
  }

  .card-item {
    width: 80%;
  }
}

@media (max-width: 600px) {
  .combined-card {
    padding: 20px;
  }

  .title {
    font-size: 2em;
    margin-bottom: 20px;
  }

  .card-item {
    width: 95%;
  }

  .icon svg {
    width: 50px;
    height: 50px;
  }

  .card-title {
    font-size: 1.3em;
  }
}
</style>